import {
	cityPicker
} from '@/api/news.js'
import {
	reactive,
	toRefs
} from '@vue/composition-api';

export function cityPickers() {

	const data = reactive({
		provinceVal: '',
		cityVal: '',
		areaVal: '',
		streetVal: '',
		province: [],
		city: [],
		area: [],
		street: [],
	})
	const changeVal = reactive({
		provinceVal: '',
		cityVal: '',
		areaVal: '',
		streetVal: ''
	})

	// methods
	// 获取省份
	const getGrovince = async () => {
		const resPro = await cityPicker({
			type: 'province'
		})
		data.province = resPro.data.data
	
	}
	// 处理省份 
	const handleProvince = async (val) => {
		const res = await cityPicker({
			type: 'city',
			province_code: val
		})
		data.city = res.data.data
		resetValue('city')
	}
	const handleCity = async (val) => {
		const res = await cityPicker({
			type: 'area',
			city_code: val
		})
		data.area = res.data.data
		resetValue('area')
	}
	const handleArea = async (val) => {
		const res = await cityPicker({
			type: 'street',
			area_code: val
		})
		data.street = res.data.data
		resetValue('street')
	}
	const handleStreet=()=>{
		resetValue()
	}
	// 监听---非watch 
	const handleChangeVal =()=>{
		for(let key in changeVal){
			changeVal[key] = data[key]
		}
	}

	// 重置 
	const resetValue = (params) => {
		const valueJson = {
			city:['cityVal','areaVal','streetVal'],
			area:['areaVal','streetVal'],
			street:['streetVal'],
		}
		params&&valueJson[params].forEach(item=>data[item]='')
		handleChangeVal()
	}


	return {
		data,//把对象类型转成基础数据类型，可以解构 需要加xx.value取值
		getGrovince,
		handleProvince,
		handleCity,
		handleArea,
		changeVal,
		handleStreet
	}
}
